<template>
  <div id="app" v-cloak>
    <!-- 骨架屏 -->
    <div v-if="loading" class="skeleton-container">
      <div class="skeleton-banner"></div>
      <div class="skeleton-inquiry"></div>
      <div class="skeleton-project"></div>
      <div class="skeleton-service"></div>
    </div>
    <div v-if="!loading" class="main-content">
      <ServiceNeedDetails :ServiceNeedData="services"/>
      <ServiceContentList :serviceContentList="serviceData"/>
      <AdvantageList :advantageData="advantage"/>
    </div>
  </div>
</template>

<script>
import {listServiceNeedType} from "@/api/serviceNeed/serviceNeed";
import { serviceContentList} from "@/api/serviceContent/serviceContent";
import {advantageList} from "@/api/advantage/advantage";
import ServiceNeedDetails from "../components/services/ServiceNeedDetails.vue"
import ServiceContentList from "../components/services/ServuceContentList.vue"
import AdvantageList from "../components/services/AdvantageList.vue";
export default {
  components: {AdvantageList, ServiceNeedDetails,ServiceContentList},
  data() {
    return {
      loading: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      advantage: [],
      activeService: 0,
      services: {},
      serviceData: [],
    }
  },
  async created() {
    await this.getServiceNeed();
    this.$nextTick(() => {
      Promise.all([
        this.getListServiceContent(),
        this.getAdvantageList(),
      ]).catch(error => {
        console.error("加载数据出错:", error);
      });
    });
  },
  watch: {
    '$route'(to) {
      this.setActiveServiceFromRoute();
    }
  },
  methods: {
    /** 查询服务内容列表 */
    getListServiceContent() {
      this.loading = true;
      serviceContentList(1).then(response => {
        this.serviceData = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    /** 查询需求服务列表 */
    getServiceNeed() {
      this.loading = true;
      listServiceNeedType(1).then(response => {
        this.services = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    /** 查询优势列表 */
    getAdvantageList() {
      this.loading = true;
      advantageList(1).then(response => {
        this.advantage = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

  }
}
</script>

<style scoped lang="scss">
/* 保持原有样式不变 */
[v-cloak] {
  display: none;
}

.skeleton-container {
  width: 100%;
  min-height: 2000px;
}

/* 骨架屏动画 */
.skeleton-banner {
  height: 800px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* 新增全局过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active {
  animation: slide-up 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}


</style>
